<template>
  <div class>
    <PageTitle :title="pageTitle"></PageTitle>
    <div class="form-wrapper">
      <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="商品品牌" prop="fication_id">
          <el-select :disabled="true" v-model="ruleForm.fication_id" placeholder="请选择商品品牌">
            <template v-for="(item, index) in ficationArr">
              <el-option :label="item.fication_name" :value="item.oid" :key="index"></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="封面图/视频">
          <el-switch
            :disabled="true"
            v-model="coverType"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="视频"
            inactive-text="图片"
          ></el-switch>
        </el-form-item>
        <el-form-item label="封面图" prop="coverFileList" v-if="!coverType">
          <div class="item" v-for="(item,index) in ruleForm.coverFileList" :key="index">
            <el-image
              style="max-width: 200px; max-height: 200px"
              :src="item.url"
              :preview-src-list="[item.url]"
            ></el-image>
          </div>
        </el-form-item>
        <el-form-item label="封面视频" prop="coverFileList" v-else>
          <div class="video">
            <div class="item" v-for="(item,index) in ruleForm.coverFileList" :key="index">
              <video controls="controls">
                  <source :src="item.url" type="video/mp4">
              </video>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">审核通过</el-button>
          <el-button @click="$router.go(-1)">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import _ from "lodash";
import PageTitle from "@/components/pageTitle/PageTitle.vue";
import Upload from "@/components/upload/Upload.vue";
import UploadVideo from "@/components/uploadVideo/UploadVideo.vue";
export default {
  name: "GoodsAdd",
  components: {
    PageTitle,
    Upload,
    UploadVideo
  },
  activated() {
    this.$goTop();
    this.getCompany();
    this.getFication();
    this._getList();

    if (this.$route.params.id && this.$route.params.url) {
      this.detailId = this.$route.params.id;
      this.detailUrl = this.$route.params.url;
      this.getDetails();
    }
  },
  deactivated() {
    this.$destroy();
  },
  data() {
    return {
      detailId: "",
      detailUrl: "",

      companyFlag: false,
      coverFlag: "",
      companyArr: [],
      tableData: [],
      pageNum: 1,
      totalCount: 0,
      pageSize: 10,
      status: "0", //  筛选参数
      search: "", //搜索参数
      ficationArr: [],
      ficationList: [],
      coverType: false,
      ruleForm: {
        goods_id: "",
        price: "",
        describe: "",
        stock: "",
        company: "",
        fication_id: "",
        coverFileList: [], //type: 1 为图片    type: 2 为视频
        fileList: [],
        id:null
      }
    };
  },
  watch: {},
  computed: {
    pageTitle() {
      return "内容中心";
    },
    submitUrl() {
      return this.$api + "/v1/goods/detail";
    },
    coverFileIdArr() {
      return this.ruleForm.coverFileList
        .map(item => {
          return item.id;
        })
        .toString();
    },
    fileIdArr() {
      return this.ruleForm.fileList
        .map(item => {
          return item.id;
        })
        .toString();
    },

    company() {
      return this.ruleForm.company;
    }
  },
  methods: {
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    async getDetails() {
      let {
        data: { data }
      } = await this.$axios({
        url: this.$api + "/v1/goods/detailed",
        method: "POST",
        data: {
          id: this.detailId
        }
      });
      this.ruleForm.goods_name = data.goods_name;
      this.ruleForm.price = data.price;
      this.ruleForm.describe = data.describe;
      this.ruleForm.stock = data.stock;
      this.ruleForm.company = data.company;
      this.ruleForm.fication_id = data.fication;
      this.ruleForm.id = data.id;
      if (data.url.indexOf(".mp4") !== -1) {
        this.coverType = true;
      }
      this.ruleForm.fileList.push({
        id: data.id,
        url: data.url
      });
      this.ruleForm.coverFileList.push({
        id: data.id,
        url: data.url
      });
    },

    
    async _getList() {
      let {
        data: { data, code }
      } = await this.$axios({
        url: this.$api + "/v1/goods/list",
        method: "GET",
        params: {
          size: this.pageSize,
          current: this.pageNum,
          state: this.status,
          title: this.search
        }
      });
      if (code == 0) {
        this.tableData = data.items;
        this.totalCount = data.page.totalCount;
      }
    },
    fileChange(data) {
      /* console.log(data); */
      this.ruleForm[data.el] = data.arr;
    },
    async getCompany() {
      let {
        data: { data }
      } = await this.$axios({
        url: this.$api + "/v1/company/list",
        method: "GET",
        params: {
          size: 1000,
          current: 1
        }
      });
      this.companyArr = data.items;
    },
    async getFication() {
      let {
        data: { data }
      } = await this.$axios({
        url: this.$api + "/v1/fication/list",
        method: "GET",
        params: {
          size: 1000,
          current: 1
        }
      });
      /*  console.log( data.items) */
      this.ficationArr = data.items;
      // this.ficationArr = this.ficationList.filter(item => {
      //   return company == item.company_id
      // })
      if (this.$route.params.id != "none") {
        // this._get()
      }
    },
    //点击过审
    async submitForm() {
      console.log("点击提交");
      this.loading = true
      let data = await this.$axios({
        url:this.$api + "/v1/goods/repairlist",
        method:"POST",
        data:{
          id:this.ruleForm.id
        }
      })
      this.loading = false
      console.log('审核结果---------',data)
      if (data.data.code == 0) {
        this.$message.success(data.data.data);
        setTimeout(() => {
          this.$router.go(-1);
        }, 1500);
      }
    }
  }
};
</script>

<style lang='scss'>
.form-wrapper {
  width: 50%;
}
.video{
    display: flex;
    flex-wrap: wrap;
}
.video .item{
    margin: 20px;
    max-width: 300px;
}
.video .item video{
    width: 100%;
}
</style>
